<template>
	<el-dialog title="编辑" :visible.sync="dialogFormVisible" :before-close="handleDialogClose">
		<el-form :model="form">
			<el-form-item label="风俗文化名" :label-width="formLabelWidth">
				<el-input v-model="form.moresName" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="封面" :label-width="formLabelWidth">
				<img :src="$store.state.imgShowRoad2 + '/file/' + form.moresPicture" class="avatar"/>
				<el-upload
				  class="orders-img_el_upload"
				  :action="upurl"
				  :limit="3"
				  list-type="picture-card"
				  :on-change="handleChange"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :on-success="handleSuccess"
				  :on-error="handleError"
				  :file-list="fileList"
				  :class="{ disUoloadSty: noneBtnImg }"
				  ref="upload">
				  <span class="orders-img_el_upload_btn" @click.stop="submitUpload">更换图片</span>
				</el-upload>
			</el-form-item>
			<el-form-item label="分类" :label-width="formLabelWidth">
				<el-select v-model="form.classifyId" clearable placeholder="请选择">
				    <el-option
				      v-for="item in ClassiftData"
				      :key="item.id"
				      :label="item.classificationName"
				      :value="item.id">
				    </el-option>
				  </el-select>
			</el-form-item>
			<!-- <el-form-item label="所属地区" :label-width="formLabelWidth">
				<el-cascader v-model="value" :props="{ value: 'regionName', label: 'regionName'}" :options="options"
					clearable>
				</el-cascader>
			</el-form-item>
			<el-form-item label="详细地址" :label-width="formLabelWidth" prop="detailedAddress">
				<el-input v-model="form.detailedAddress" autocomplete="off"></el-input>
			</el-form-item> -->
			<el-form-item label="描述" :label-width="formLabelWidth">
				<div ref="editor"></div>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleDialogClose">取 消</el-button>
			<el-button type="primary" @click="editorMores">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import MoresApi from "@/api/mores.js"
	import Editor from "wangeditor"
	export default {
		components: {
		},
		data() {
			return {
				editor: null,
				value: [],
				options: [],
				dialogImageUrl: "",
				ClassiftData: [],
				ClassiftValue:'',
				dialogVisible: false,
				showBtnImg: true,
				noneBtnImg: false,
				limitCountImg: 3,
				upurl: "/api/file/upload/mores",
				fileList: [],
				imgurl: "",
				dialogFormVisible: false,
				form: {
					moresName: "",
					moresPicture: "",
					moresIntroduce: "",
					classifyId: "",
					district: "",
					detailedAddress: ""
				},
				formLabelWidth: '120px'
			};
		},
		methods: {
			createEditor() {
				this.$nextTick(() => {
					this.editor = new Editor(this.$refs.editor)
					this.editor.config.uploadImgServer = "api/file/editUpload/mores"
					this.editor.config.uploadFileName = "file"
					this.editor.config.uploadVideoServer = 'api/file/editUpload/mores'
					this.editor.config.uploadVideoName = "file"
					this.editor.create()
					this.editor.txt.html(this.form.moresIntroduce)
				})
			},
			handleError(err, file, fileList) {
			  this.$message({
			    message: "上传失败！",
			    type: "success",
			  });
			  console.log(err);
			},
			handleSuccess(response, file, fileList) {
			  if (file.response.flag == true) {
			    this.fileList = fileList;
			    this.form.moresPicture = file.response.data;
			    if (fileList.length >= 3) {
			      this.uploadDisabled = true;
			    }
			    alert(file.response.message);
			  } else {
			    alert(file.response.data);
			  }
			},
			handleChange(file, fileList) {
			  this.noneBtnImg = fileList.length >= this.limitCountImg;
			},
			handleRemove(file, fileList) {
			  this.noneBtnImg = fileList.length >= this.limitCountImg;
			  this.fileList.pop();
			  // this.form.photo = "";
			  this.uploadDisabled = false;
			},
			handlePreview(file) {
			  this.dialogImageUrl = file.url;
			  this.dialogVisible = true;
			},
			submitUpload() {
			  this.$refs.upload.submit();
			},
			async editorMores() {
				let content = this.editor.txt.html();
				const res = await MoresApi.editorMores("/znMores/editorMores", {
					moresId: this.form.moresId,
					moresName: this.form.moresName,
					moresPicture: this.form.moresPicture,
					classifyId:this.form.classifyId,
					moresIntroduce: content,
					district: this.value.join(','),
					detailedAddress: this.form.detailedAddress
				});
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.$message.success("编辑成功");
					this.$parent.SearchMoresAll();
					this.editor.destroy();
					this.value = [];
					this.editor = null;
				}
			},
			handleDialogClose() {
				this.dialogFormVisible = false;
				this.editor.destroy();
				this.value = [];
				this.editor = null;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.avatar {
	  float: left;
	  width: 148px;
	  height: 148px;
	  border-radius: 3%;
	  margin-right: 10px;
	  }
</style>